<template>
  <div>
    <el-menu
      :collapse="menuStore.menuBoo"
      :default-active="activeIndex2"
      class="el-menu-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
      router
    >
      <!-- router 路由模式 -->
      <el-menu-item :index="null">
          <el-icon>
            <Platform />
          </el-icon>
          <span>课堂后台管理系统</span>
      </el-menu-item>
      <template v-for="menu in menuList" :key="menu.id">
        <!-- 如果没有子菜单就不显示否则就显示 -->
        <el-menu-item :index="menu.path" v-if="!menu.subMenu">
          <!-- 调用二次封装的图标组件 -->
            <MenuIcon :name="menu.icon" />
            <span>{{ menu.title }}</span>
        </el-menu-item>
        <!-- 循环的时候会有多个2 或者多个2-1 所以会同时打开多个菜单 -->
        <el-sub-menu :index="menu.path" v-else>
          <template #title>
            <MenuIcon :name="menu.icon" />
            <span>{{ menu.title }}</span>
          </template>
          <el-menu-item
            :index="sub.path"
            v-for="sub in menu.subMenu"
            :key="sub.id"
          >
            <template #title>
              <MenuIcon :name="sub.icon" />
              <span>{{ sub.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
// @相对路径表示src文件下
import { useMenuStore } from "@/stores/menu";
// 引入二次封装的图标
import MenuIcon from "./MenuIcon.vue";

const menuStore = useMenuStore();
const activeIndex2 = ref("/");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

// 模拟菜单列表数据
const menuList = ref<Array<any>>([
  {
    id: 1,
    title: "仪表盘",
    path: "/",
    icon: "Odometer"
  },
  {
    id: 2,
    title: "权限管理",
    path: "/lock",
    icon: "Lock",
    subMenu: [
      {
        id: 3,
        title: "用户管理",
        path: "/user",
        icon: "User"
      },
      {
        id: 4,
        title: "角色管理",
        path: "/role",
        icon: "UserFilled"
      },
      {
        id: 5,
        title: "权限管理",
        path: "/admin",
        icon: "Unlock"
      },
    ],
  },
  {
    id: 6,
    title: "讲师管理",
    path: "/teacher",
    icon: "Avatar",
    subMenu: [
      {
        id: 7,
        title: "讲师列表",
        path: "/teacherList",
        icon: "Tickets"
      },
      {
        id: 8,
        title: "添加讲师",
        path: '/teacherAdd',
        icon: "Plus"
      }
    ],
  },
  {
    id: 9,
    title: "课程分类管理",
    path: "/courseCate",
    icon: "Grid",
    subMenu: [
      {
        id: 10,
        title: "课程分类列表",
        path: "/courseCateList",
        icon: "Tickets"
      },
      {
        id: 11,
        title: "导入课程类别",
        path: '/courseCateAdd',
        icon: "Plus"
      }
    ],
  },
  {
    id: 12,
    title: "课程管理",
    path: "/course",
    icon: "Collection",
    subMenu: [
      {
        id: 13,
        title: "课程列表",
        path: "/courseList",
        icon: "Tickets"
      },
      {
        id: 14,
        title: "课程添加",
        path: '/courseAdd',
        icon: "Plus"
      }
    ],
  },
  {
    id: 15,
    title: "轮播图管理",
    path: "/swiper",
    icon: "PictureFilled",
    subMenu: [
      {
        id: 16,
        title: "轮播图列表",
        path: "/swiperList",
        icon: "Tickets"
      },
      {
        id: 17,
        title: "轮播图添加",
        path: '/swiperAdd',
        icon: "Plus"
      }
    ],
  },
  {
    id: 18,
    title: "统计分析",
    path: "/option",
    icon: "DataLine"
  },
  {
    id: 19,
    title: "订单列表",
    path: "/order",
    icon: "CreditCard"
  },
  {
    id: 20,
    title: "文章管理",
    path: "/article",
    icon: "DocumentCopy",
    subMenu: [
      {
        id: 21,
        title: "文章列表",
        path: "/articleList",
        icon: "Tickets"
      },
      {
        id: 22,
        title: "文章添加",
        path: '/articleAdd',
        icon: "Plus"
      }
    ],
  },
  {
    id: 23,
    title: "留言列表",
    path: "/memo",
    icon: "Memo"
  },
]);
</script>

<style scoped></style>
